<template>
  <a-layout>
    <Breadcrumb class="iconfont icon-home" msg="场站管理" />
    <a-layout-content
      :style="{
        background: '#fff',
        padding: '12px ',
        margin: 0,
      }"
    >
      <span class="title">场站管理</span>
      <div class="operationBar">
        <div class="operationBar-up">
          <div class="operationitem">
            <span class="title1">场站代号</span>
            <a-input v-model:value="code" placeholder="请输入场站代号" />
          </div>
          <div class="operationitem">
            <span class="title1">场站名称</span>
            <a-input v-model:value="name" placeholder="请输入场站名称" />
          </div>
          <div class="operationitem">
            <span class="title1">营业状态</span>
            <a-select v-model:value="state" style="width: 238px">
              <a-select-option value="all">全部</a-select-option>
              <a-select-option value="1">营业中</a-select-option>
              <a-select-option value="2">已打烊</a-select-option>
            </a-select>
          </div>
          <a-button type="primary">
            <template #icon><SearchOutlined /></template>
            查询
          </a-button>
        </div>
        <div class="operationBar-button">
          <div class="operationitem">
            <span class="title1">场站地区</span>
            <a-select v-model:value="area" style="width: 238px">
              <a-select-option value="all">全部</a-select-option>
              <a-select-option value="1">天津市武清区</a-select-option>
              <a-select-option value="2">天津市西青区</a-select-option>
              <a-select-option value="3">天津市南开区</a-select-option>
              <a-select-option value="4">天津市河西区</a-select-option>
              <a-select-option value="5">天津市滨海新区</a-select-option>
            </a-select>
          </div>
          <div class="operationitem">
            <span class="title1">达成协议量</span>
            <a-button size="small" @click="startMinus">
              <template #icon>
                <minus-outlined />
              </template>
            </a-button>
            <a-input
              v-model:value="startQuantity"
              size="small"
              style="width: 40px; text-align: center"
            />
            <a-button size="small" @click="startAdd">
              <template #icon>
                <plus-outlined />
              </template>
            </a-button>
            <span>至</span>
            <a-button size="small" @click="endMinus">
              <template #icon>
                <minus-outlined />
              </template>
            </a-button>
            <a-input
              v-model:value="endQuantity"
              size="small"
              style="width: 40px; text-align: center"
            />

            <a-button size="small" @click="endAdd">
              <template #icon>
                <plus-outlined />
              </template>
            </a-button>
          </div>
          <div class="operationitem">
            <span class="title1">创立日期</span>
            <a-range-picker v-model:value="value" :locale="locale" />
          </div>
          <a-button type="default">
            <template #icon><redo-outlined /></template>
            重置
          </a-button>
        </div>
      </div>
      <!-- 分割线 -->
      <a-divider />
      <div class="operationButtonGroup">
        <div>
          <a-button type="primary">
            <template #icon><plus-outlined /></template>
            新建
          </a-button>
        </div>
        <div class="operationButtonGroupItem3">
          <a-button type="primary" danger>
            <template #icon><delete-outlined /></template>
            删除
          </a-button>
        </div>
      </div>
      <a-table
        :columns="columns"
        :data-source="data"
        style="padding: 10px 0 0 0;"
        :pagination="ipagination"
        @change="handleTableChange"
      >
        <template #headerCell="{ column }">
          <template v-if="column.key === 'code'">
            <span> 场站代号 </span>
          </template>
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'code'">
            <a-checkbox v-model:checked="record.checked"
              ><span>
                {{ record.code }}
              </span></a-checkbox
            >
          </template>
          <template v-else-if="column.key === 'name'">
            <span>{{ record.name }}</span>
          </template>
          <template v-else-if="column.key === 'state'">
            <a-tag :color="record.state === '营业中' ? 'green' : 'default'">{{record.state}}</a-tag>
          </template>
          <template v-else-if="column.key === 'establishData'">
            <span>
              {{record.establishData }}
            </span>
          </template>
          <template v-else-if="column.key === 'operation'">
            <span>
              <a>编辑</a>
              <a-divider type="vertical" />
              <a>更多</a>
            </span>
          </template>
        </template>
      </a-table>
    </a-layout-content>
  </a-layout>
</template>

<script>
// @ is an alias to /src
import Breadcrumb from "@/components/Breadcrumb.vue";
import {
  SearchOutlined,
  RedoOutlined,
  PlusOutlined,
  DeleteOutlined,
  MinusOutlined,
} from "@ant-design/icons-vue";
import { defineComponent, ref, computed } from "vue";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
const columns = [
  {
    name: "code",
    dataIndex: "场站代号",
    key: "code",
  },

  {
    title: "场站名称",
    key: "name",
    dataIndex: "name",
  },
  {
    title: "当前状态",
    key: "state",
    dataIndex: "state",
  },
  {
    title: "创立日期",
    key: "establishData",
  },
  {
    title: "场站地区",
    dataIndex: "area",
    key: "area",
  },
  {
    title: "场站位置",
    dataIndex: "location",
    key: "location",
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
  },
];
const data = [
  {
    key: "1",
    code:"000001",
    name: "示例场站",
    state: "营业中",
    establishData: "2021-02-28",
    area:"天津市西青区",
    location: "天津市西青区示例位置示例位置示例位置示例",
    checked: false,
  },
  {
    key: "2",
    code:"000002",
    name: "示例场站",
    state: "营业中",
    establishData: "2021-02-28",
    area:"天津市武清区",
    location: "天津市武清区示例位置示例位置示例位置示例",
    checked: false,
  },
  {
    key: "3",
    code:"000003",
    name: "示例场站",
    state: "营业中",
    establishData: "2021-02-28",
    area:"天津市南开区",
    location: "天津市南开区示例位置示例位置示例位置示例",
    checked: false,
  },
  {
    key: "4",
    code:"000004",
    name: "示例场站",
    state: "已打烊",
    establishData: "2021-02-28",
    area:"天津市河西区",
    location: "天津市河西区示例位置示例位置示例位置示例",
    checked: false,
  },
  {
    key: "5",
    code:"000005",
    name: "示例场站",
    state: "营业中",
    establishData: "2021-02-28",
    area:"天津市滨海新区",
    location: "天津市滨海新区示例位置示例位置示例位置示例",
    checked: false,
  },
  {
    key: "6",
    code:"000006",
    name: "示例场站",
    state: "营业中",
    establishData: "2021-02-28",
    area:"天津市西青区",
    location: "天津市西青区示例位置示例位置示例位置示例",
    checked: false,
  },
  {
    key: "7",
    code:"000007",
    name: "示例场站",
    state: "营业中",
    establishData: "2021-02-28",
    area:"天津市河西区",
    location: "天津市河西区示例位置示例位置示例位置示例",
    checked: false,
  },
  {
    key: "8",
    code:"000008",
    name: "示例场站",
    state: "已打烊",
    establishData: "2021-02-28",
    area:"天津市西青区",
    location: "天津市西青区示例位置示例位置示例位置示例",
    checked: false,
  },
  {
    key: "9",
    code:"000009",
    name: "示例场站",
    state: "营业中",
    establishData: "2021-02-28",
    area:"天津市西青区",
    location: "天津市西青区示例位置示例位置示例位置示例",
    checked: false,
  },
  {
    key: "10",
    code:"000010",
    name: "示例场站",
    state: "营业中",
    establishData: "2021-02-28",
    area:"天津市西青区",
    location: "天津市西青区示例位置示例位置示例位置示例",
    checked: false,
  },
  {
    key: "11",
    code:"000011",
    name: "示例场站",
    state: "营业中",
    establishData: "2021-02-28",
    area:"天津市西青区",
    location: "天津市西青区示例位置示例位置示例位置示例",
    checked: false,
  },
  {
    key: "12",
    code:"000012",
    name: "示例场站",
    state: "营业中",
    establishData: "2021-02-28",
    area:"天津市西青区",
    location: "天津市西青区示例位置示例位置示例位置示例",
    checked: false,
  },

  
];
export default defineComponent({
  name: "StationManagement",
  components: {
    Breadcrumb,
    SearchOutlined,
    RedoOutlined,
    PlusOutlined,
    DeleteOutlined,
    MinusOutlined,
  },
  setup() {
    const code = ref("");
    const name = ref("");
    const area = ref("全部");
    const value = ref();
    const state = ref("全部");
    const startQuantity = ref(0);
    const endQuantity = ref(99);
    const quantity = computed(() => {
      return endQuantity - startQuantity;
    });
    return {
      code,
      name,
      area,
      value,
      state,
      startQuantity,
      endQuantity,
      quantity,
      locale,
      data,
      columns,
      ipagination: computed(() => ({
        total: 12,
        current: 1,
        pageSize: 8,
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条";
        },
        defaultPageSize: 10,
        showQuickJumper: true, // 是否显示跳转窗
      })),
    };
  },
  methods: {
    handleTableChange(pagination, filters, sorter) {
      this.ipagination.current = pagination.current;
      this.ipagination.pagesize = pagination.pageSize;
    },
    //增加开始时间
    startAdd() {
      this.startQuantity++;
    },
    //减少开始时间
    startMinus() {
      if (this.startQuantity) {
        this.startQuantity--;
      }
    },
    //增加结束时间
    endAdd() {
      this.endQuantity++;
    },
    //减少结束时间
    endMinus() {
      if (this.endQuantity) {
        this.endQuantity--;
      }
    },
  },
});
</script>
<style>
.operationBar {
  padding: 10px 0 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.operationBar .operationBar-up {
  padding: 10px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.operationBar .operationBar-button {
  padding: 10px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.operationitem {
  height: 32px;
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.operationitem .title1 {
  white-space: nowrap;
  padding: 0 10px;
}
.operationButtonGroup {
  padding: 0 10px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.operationButtonGroup .operationButtonGroupItem3 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 434px;
}
</style>
